Week 1
HTML & CSS - Introduction to Web development
Topics/Todos
Refer to the suggested resources to make sure you are aware of the listed topics once you complete the week.
Basics of Web
HTML
- Tags
- Forms
- Elements
- Attributes
- Headings
- Hyperlinks
- Adding images
- Tables
- Lists
- Favicon
- Adding comments
CSS
- Methods for adding CSS to a webpage
- Selectors
- Colors
- CSS box model (borders, margin, padding)
- Flexbox
- Fonts
- Lists
- Shadows
[Mandatory] Create an account on Freecodecamp and start the “responsive web design” course (Responsive Web Design Certification | freeCodeCamp.org ). Complete the first two projects (Survey form and Tribute page)
Once you complete the above topics
- Create an account on replit(Sign Up - Replit ) and try some HTML there: Follow this doc: Learning HTML and CSS by building a 90s-inspired website | Replit Docs
- Download and install Visual Studio Code and use it to create HTML pages locally. (Learn Visual Studio Code in 7min (Official Beginner Tutorial) Watch this if you are new to VSCode, skip the non-HTML parts)
Resources
Students need not refer to every resource given. Select any 1/2 resources for a single topic.
- For testing HTML online, you can use any resources like W3Schools Tryit Editor
Articles
Youtube Videos
- Videos from 100Devs bootcamp: Free Software Engineering Bootcamp - #100Devs - YouTube
Can use videos 1 - 5 in this playlist. You may skip over to the start of the HTML topic(towards the end) in the case of the first video.
- HTML Crash course for Absolute beginners
- CSS Crash course for Absolute beginners
- HTML Full Course - Build a Website Tutorial (2 Hrs)
- Learn HTML & CSS – Full Course for Beginners (5 hrs)
Others
- W3 Schools: Text tutorials on HTML & CSS
- HTML Tutorial
- CSS Tutorial
- Foundations | The Odin Project HTML
- Foundations | The Odin Project CSS
- Structuring the web with HTML - Learn web development | MDN
- Intro to HTML/CSS: Making webpages | Computer programming | Khan Academy
- Overview of HTML web.dev Tutorial
- Learn CSS web.dev Tutorial
- [Recommended] Flexbox Learning Game: https://flexboxfroggy.com/
Weekly Practical Tasks
Use the HTML and CSS topics learned in the week to design a webpage and showcase it
Sources
Link to sources used for creating this week's curriculum (if any). Students can ignore this section. This section is for the reference of reviewers only.
- Viorel's Tutorial: Front End
https://docs.google.com/document/d/1q-JIYDt26zJ3jl2q5Um445l8JVcgP1WcjY5qTxmdzu0/edit?usp=sharing